<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>011_事件的委派</title>
</head>
<body>
    <button type="button" id="btn">我是一个按钮</button>
    <ul id="u1">
        <li>
            <a href="javascript:;" class="link">超链接一</a>
        </li>

        <li>
            <a href="javascript:;" class="link">超链接二</a>
        </li>

        <li>
            <a href="javascript:;" class="link">超链接三</a>
        </li>
    </ul>

<script type="text/javascript">

    /**
     *  这里为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，而且这种操作只能为已有的超链接设置事件，而通过按钮新添加的超链接必须重新绑定
     *
     *  而我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是通过按钮或者其他方式后添加的，
     *  我们可以尝试为ul绑定一个单机响应函数
     *
     *  事件的委派：
     *      指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
     *      事件的委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的功能。
     */
   /* var allA = document.getElementsByTagName("a");
    for(var i = 0; i < allA.length; i++) {
        allA[i].onclick = function () {
            alert("hello World");
        }
    }*/

    var u1 = document.getElementById("u1");
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        var li = document.createElement("li");
        li.innerHTML = "<a href='javascript:;' class='link'>超链接</a>";
        u1.appendChild(li);
    }

    u1.onclick = function (event) {

        /**
         * 这样操作后，导致不仅点击a标签会触发事件，只要点击的是ul标签的区域，则就会自动触发事件
         * 此处需要做判断：如果触发事件的对象使我们期望的元素，则执行后续操作，否则不执行
         */
        if(!event) {
            event = window.event;
        }
        // event.target 表示的是触发事件的对象
        if(event.target.className == 'link') {
            alert("hello world");
        }
    }
</script>
</body>
</html>